import type { VbenFormProps } from '#/adapter/form';
import { z } from '#/adapter/form';
import dayjs, { Dayjs } from 'dayjs';
import { h, reactive } from 'vue';
import type { DescItem } from '#/components';

// 表单通用配置
export const commonFormConfig: VbenFormProps = {
  actionWrapperClass: 'text-center',
  commonConfig: {
    colon: true,
    labelWidth: 125,
    componentProps: {
      class: 'w-full',
    },
  },
  submitButtonOptions: {
    // 按钮显示文本
    content: '下一项',
  },
  resetButtonOptions: {
    content: '上一项',
  },
  layout: 'horizontal',
  // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
};

/*==========================委托单表单配置==========================*/
export const samplePropOptions = [
  { label: '无危害', value: 'Harmless' },
  { label: '易燃', value: 'Flammable' },
  { label: '易爆', value: 'Explosive' },
  { label: '有毒', value: 'Poisonous' },
  { label: '腐蚀性', value: 'Corrosiveness' },
  { label: '其他', value: 'Others' },
];
export const testItemsOptions = [
  // 氦气、氮气、氩气、氧气、二氧化碳、氢气、甲烷、一氧化碳、天然气、液化气
  // 含氧化合物-乙烯、含氧化合物-丙烯、乙烯、丙烯、空气中二氧化硫、空气中甲烷
  { label: '氦气', value: 'Helium' },
  { label: '氮气', value: 'Nitrogen' },
  { label: '氩气', value: 'Argon' },
  { label: '氧气', value: 'Oxygen' },
  { label: '二氧化碳', value: 'CarbonDio' },
  { label: '氢气', value: 'Hydrogen' },
  { label: '甲烷', value: 'Methane' },
  { label: '一氧化碳', value: 'CarbonMono' },
  { label: '天然气', value: 'Natural' },
  { label: '液化气', value: 'Liquefied' },
  { label: '乙烯中含氧化合物', value: 'OxygenEthy' },
  { label: '丙烯中含氧化合物', value: 'OxygenPropy' },
  { label: '乙烯中烃类杂质', value: 'Ethylene' },
  { label: '丙烯中烃类杂质', value: 'Propylene' },
  { label: '空气中二氧化硫', value: 'AirSO2' },
  { label: '空气中甲烷', value: 'AirMethane' },
];
export const judgmentRuleOptions = [
  { label: '简单接受', value: '简单接受的二元判定规则' },
  { label: '有保护带（二元）', value: '有保护带的二元判定规则' },
  { label: '有保护带（非二元）', value: '有保护带的非二元判定规则' },
  { label: '其他判定规则', value: '其他判定规则' },
];
let samplePropCurrrentValue = []; // 当前选中的样品特性

export const orderFormSchemas: VbenFormProps = {
  schema: [
    {
      component: 'Divider',
      componentProps: {
        orientation: 'left',
        orientationMargin: '0px',
        class: 'm-0', // 去掉默认的margin
      },
      formItemClass: 'col-span-12',
      label: '分割线',
      fieldName: 'divider1',
      hideLabel: true,
      labelWidth: 0,
      // renderComponentContent: () => {
      //   return {
      //     default: () => h('div', { style: { fontWeight: 'bold' } }, '委托信息'),
      //   };
      // },
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
        allowClear: true,
        addonBefore: 'RT/JC-BJ-',
      },
      formItemClass: 'col-span-3', // 占据两列
      label: '报价单编号',
      fieldName: 'quotationNo',
      // 使用ZOD验证器，规则为：只能为“/”或者“四位数字-三位数字”
      rules: z.string().regex(/^\/$|^\d{4}-\d{3}$/, '格式错误'),
    },
    {
      component: 'DatePicker',
      componentProps: {
        placeholder: '请选择',
        showTime: false,
        showToday: true,
        allowClear: true,
        format: 'YYYY年MM月DD日',
        picker: 'date',
        mode: 'date',
      },
      formItemClass: 'col-span-3',
      label: '委托时间',
      fieldName: 'orderDate',
      rules: 'selectRequired',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
        allowClear: true,
      },
      formItemClass: 'col-span-3',
      label: '联系人',
      fieldName: 'contactPerson',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
        allowClear: true,
      },
      formItemClass: 'col-span-3',
      label: '联系电话',
      fieldName: 'contactPhone',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
        allowClear: true,
      },
      formItemClass: 'col-span-3',
      label: '邮箱',
      fieldName: 'email',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
        allowClear: true,
      },
      formItemClass: 'col-span-3',
      label: '委托单位名称',
      fieldName: 'clientName',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
        allowClear: true,
      },
      formItemClass: 'col-span-6',
      label: '委托单位地址',
      fieldName: 'clientAddr',
      rules: 'required',
    },

    {
      component: 'Divider',
      componentProps: {
        orientation: 'left',
        orientationMargin: '0px',
        class: 'm-0', // 去掉默认的margin
      },
      formItemClass: 'col-span-12',
      label: '分割线',
      fieldName: 'divider2',
      hideLabel: true,
      labelWidth: 0,
      // renderComponentContent: () => {
      //   return {
      //     default: () => h('div', '样品信息'),
      //   };
      // },
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
        allowClear: true,
      },
      formItemClass: 'col-span-4',
      label: '样品名称',
      fieldName: 'sampleName',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
        allowClear: true,
      },
      formItemClass: 'col-span-6',
      label: '型号规格',
      fieldName: 'modelSpec',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
        allowClear: true,
      },
      formItemClass: 'col-span-2',
      label: '数量',
      fieldName: 'quantity',
      rules: 'required',
    },
    {
      component: 'CheckboxGroup',
      componentProps: {
        options: samplePropOptions,
      },
      formItemClass: 'col-span-4',
      label: '样品特性',
      fieldName: 'sampleProp',
      rules: 'selectRequired',
      dependencies: {
        triggerFields: ['sampleProp'],
        trigger(values, formApi) {
          if (!values.sampleProp) {
            // 避免为空或者undefined时，.includes报错
            return;
          }
          // 如果samplePropCurrrentValue与values.sampleProp两个数组相等，则不执行任何操作
          // 避免反复触发trigger函数
          if (
            samplePropCurrrentValue.length === values.sampleProp.length &&
            samplePropCurrrentValue.every((v) => values.sampleProp.includes(v))
          ) {
            return;
          } else if (values.sampleProp.includes('Harmless')) {
            samplePropCurrrentValue = values.sampleProp;
            formApi.setFieldValue('sampleProp', ['Harmless']);
          }
        },
      },
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
        allowClear: true,
      },
      formItemClass: 'col-span-8',
      label: '样品特性补充',
      fieldName: 'propAddContent',
      help: '当样品特性为`其他`时，必填',
      dependencies: {
        triggerFields: ['sampleProp'],
        disabled(values) {
          if (!values.sampleProp) {
            // 避免为空或者undefined时，.includes报错
            return true;
          } else {
            return values.sampleProp.includes('Others') ? false : true;
          }
        },
        // 动态rules
        rules(values) {
          if (!values.sampleProp) {
            return null;
          } else {
            return values.sampleProp.includes('Others') ? 'required' : null;
          }
        },
        // 字段变更时，都会触发该函数
        trigger(values, formApi) {
          if (!values.sampleProp) {
            formApi.setFieldValue('propAddContent', '/');
          } else {
            formApi.setFieldValue('propAddContent', values.sampleProp.includes('Others') ? '' : '/');
          }
        },
      },
    },
    {
      component: 'RadioGroup',
      componentProps: {
        options: testItemsOptions,
      },
      formItemClass: 'col-span-12',
      label: '检测项目',
      fieldName: 'testItems',
      rules: 'selectRequired',
    },
    {
      component: 'RadioGroup',
      componentProps: {
        optionType: 'button',
        buttonStyle: 'solid',
        options: [
          { label: '样品退回', value: true },
          { label: '检测单位自行处理', value: false },
        ],
      },
      formItemClass: 'col-span-3',
      label: '样品处理方式',
      fieldName: 'sampleHandling',
      rules: 'selectRequired',
    },
    {
      component: 'RangePicker',
      componentProps: {
        allowClear: true,
      },
      formItemClass: 'col-span-3',
      label: '测试周期',
      fieldName: 'testCycle',
      rules: 'selectRequired',
      dependencies: {
        triggerFields: ['orderDate'],
        componentProps(values) {
          if (values.orderDate) {
            return {
              disabledDate: (current: Dayjs) => {
                return current && current < dayjs(values.orderDate).startOf('day');
              },
            };
          }
        },
      },
    },
    {
      component: 'RadioGroup',
      componentProps: {
        optionType: 'button',
        buttonStyle: 'solid',
        options: [
          { label: '普通', value: false },
          { label: '加急', value: true },
        ],
      },
      formItemClass: 'col-span-3',
      label: '服务类型',
      fieldName: 'serviceType',
      rules: 'selectRequired',
    },
    {
      component: 'RadioGroup',
      componentProps: {
        optionType: 'button',
        buttonStyle: 'solid',
        options: [
          { label: '是', value: true },
          { label: '否', value: false },
        ],
      },
      formItemClass: 'col-span-3',
      label: '检测分包',
      fieldName: 'subcontractTest',
      rules: 'selectRequired',
    },
    {
      component: 'Textarea',
      componentProps: {
        placeholder: '请输入',
        allowClear: true,
        autoSize: true,
      },
      formItemClass: 'col-span-12',
      label: '特殊要求',
      fieldName: 'specialReq',
      rules: '',
    },

    {
      component: 'Divider',
      componentProps: {
        orientation: 'left',
        orientationMargin: '0px',
        class: 'm-0', // 去掉默认的margin
      },
      formItemClass: 'col-span-12',
      label: '分割线',
      fieldName: 'divider3',
      hideLabel: true,
      labelWidth: 0,
      // renderComponentContent: () => {
      //   return {
      //     default: () => h('div', '其他信息'),
      //   };
      // },
    },
    {
      component: 'RadioGroup',
      componentProps: {
        optionType: 'button',
        buttonStyle: 'solid',
        options: [
          { label: '仅提供数据', value: false },
          { label: '需判定', value: true },
        ],
      },
      formItemClass: 'col-span-4',
      label: '报告结果',
      fieldName: 'reportResult',
      rules: 'selectRequired',
    },
    {
      component: 'Select',
      componentProps: {
        placeholder: '请选择',
        allowClear: true,
        options: judgmentRuleOptions,
      },
      formItemClass: 'col-span-4',
      label: '判定规则',
      fieldName: 'judgmentRule',
      help: '当需判定结果时，必填',
      dependencies: {
        triggerFields: ['reportResult'],
        disabled(values) {
          return !values.reportResult;
        },
        // 动态rules
        rules(values) {
          return values.reportResult ? 'selectRequired' : null;
        },
        // 字段变更时，都会触发该函数
        trigger(values, formApi) {
          if (!values.reportResult) {
            formApi.setFieldValue('judgmentRule', '/');
          } else if (values.reportResult && values.judgmentRule === '/') {
            formApi.setFieldValue('judgmentRule', ['简单接受的二元判定规则']);
          }
        },
      },
    },
    {
      component: 'RadioGroup',
      componentProps: {
        optionType: 'button',
        buttonStyle: 'solid',
        options: [
          { label: '自取', value: 'Byself' },
          { label: '电子邮件', value: 'Bymail' },
          { label: '快递', value: 'Byexpress' },
        ],
      },
      formItemClass: 'col-span-4',
      label: '报告发送',
      fieldName: 'reportSending',
      rules: 'selectRequired',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入地址',
        allowClear: true,
      },
      formItemClass: 'col-span-12',
      label: '快递地址',
      fieldName: 'reportAddContent',
      help: '当选择`快递`时，必填',
      dependencies: {
        triggerFields: ['reportSending'],
        // 动态判断当前字段是否需要显示，不显示用css隐藏
        disabled(values) {
          return values.reportSending !== 'Byexpress';
        },
        // 动态rules
        rules(values) {
          return values.reportSending === 'Byexpress' ? 'required' : null;
        },
        // 字段变更时，都会触发该函数
        trigger(values, formApi) {
          if (values.reportSending !== 'Byexpress') {
            formApi.setFieldValue('reportAddContent', '/');
          } else if (values.reportSending === 'Byexpress' && values.reportAddContent === '/') {
            formApi.setFieldValue('reportAddContent', '');
          }
        },
      },
    },
    {
      component: 'RadioGroup',
      componentProps: {
        optionType: 'button',
        buttonStyle: 'solid',
        options: [
          { label: '无需发票', value: 'Noneed' },
          { label: '增值税普通发票', value: 'OrdinaryVAT' },
          { label: '增值税专用发票', value: 'SpecialVAT' },
        ],
      },
      formItemClass: 'col-span-4',
      label: '发票种类',
      fieldName: 'invoiceType',
      rules: 'selectRequired',
    },
    {
      component: 'RadioGroup',
      componentProps: {
        optionType: 'button',
        buttonStyle: 'solid',
        options: [
          { label: '同委托单位', value: true },
          { label: '不同', value: false },
        ],
      },
      formItemClass: 'col-span-4',
      label: '发票抬头',
      fieldName: 'invoiceTitle',
      help: '当需要发票时，必填',
      dependencies: {
        triggerFields: ['invoiceType'],
        disabled(values) {
          return values.invoiceType === 'Noneed';
        },
        // 动态rules
        rules(values) {
          return values.invoiceType !== 'Noneed' ? 'selectRequired' : null;
        },
        // 字段变更时，都会触发该函数
        trigger(values, formApi) {
          if (values.invoiceType === 'Noneed') {
            formApi.setFieldValue('invoiceTitle', null);
          }
        },
      },
    },
    {
      component: 'RadioGroup',
      componentProps: {
        optionType: 'button',
        buttonStyle: 'solid',
        options: [
          { label: '同委托单位', value: true },
          { label: '不同', value: false },
        ],
      },
      formItemClass: 'col-span-4',
      label: '发票寄送',
      fieldName: 'invoiceMailing',
      help: '当需要发票时，必填',
      dependencies: {
        triggerFields: ['invoiceType'],
        disabled(values) {
          return values.invoiceType === 'Noneed';
        },
        // 动态rules
        rules(values) {
          return values.invoiceType !== 'Noneed' ? 'selectRequired' : null;
        },
        // 字段变更时，都会触发该函数
        trigger(values, formApi) {
          if (values.invoiceType === 'Noneed') {
            formApi.setFieldValue('invoiceMailing', null);
          }
        },
      },
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
        allowClear: true,
      },
      formItemClass: 'col-span-6',
      label: '发票抬头内容',
      fieldName: 'invoiceTitleCont',
      dependencies: {
        triggerFields: ['invoiceType', 'invoiceTitle'],
        disabled(values) {
          return values.invoiceType === 'Noneed';
        },
        // 动态rules
        rules(values) {
          return values.invoiceType !== 'Noneed' && !values.invoiceTitle ? 'required' : null;
        },
        // 字段变更时，都会触发该函数
        trigger(values, formApi) {
          if (values.invoiceTitle || values.invoiceType === 'Noneed') {
            formApi.setFieldValue('invoiceTitleCont', '/');
          } else if (!values.invoiceTitle && values.invoiceTitleCont === '/') {
            formApi.setFieldValue('invoiceTitleCont', '');
          }
        },
      },
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
        allowClear: true,
      },
      formItemClass: 'col-span-6',
      label: '发票邮寄地址',
      fieldName: 'invoiceMailAddr',
      dependencies: {
        triggerFields: ['invoiceType', 'invoiceMailing'],
        disabled(values) {
          return values.invoiceType === 'Noneed';
        },
        // 动态rules
        rules(values) {
          return values.invoiceType !== 'Noneed' && !values.invoiceMailing ? 'required' : null;
        },
        // 字段变更时，都会触发该函数
        trigger(values, formApi) {
          if (values.invoiceMailing || values.invoiceType === 'Noneed') {
            formApi.setFieldValue('invoiceMailAddr', '/');
          } else if (!values.invoiceMailing && values.invoiceMailAddr === '/') {
            formApi.setFieldValue('invoiceMailAddr', '');
          }
        },
      },
    },
    {
      component: 'Textarea',
      componentProps: {
        placeholder: '请输入备注',
        allowClear: true,
        autoSize: true,
      },
      formItemClass: 'col-span-12',
      label: '备注',
      fieldName: 'remarks',
      rules: 'required',
    },
  ],
};

/*==========================详情列表配置==========================*/
export const descriptionSchema: DescItem[] = reactive([
  { label: '报价单编号', fieldName: 'quotationNo' },
  { label: '委托单编号', fieldName: 'orderNo' },
  { label: '委托时间', fieldName: 'orderDate' },
  { label: '联系人', fieldName: 'contactPerson' },
  { label: '联系电话', fieldName: 'contactPhone' },
  { label: '邮箱', fieldName: 'email' },
  { label: '委托单位名称', fieldName: 'clientName' },
  { label: '委托单位地址', fieldName: 'clientAddr', span: { md: 2, sm: 1, xs: 1 } },
  { label: '样品名称', fieldName: 'sampleName' },
  { label: '型号规格', fieldName: 'modelSpec' },
  { label: '数量', fieldName: 'quantity' },
  {
    label: '样品特性',
    fieldName: 'sampleProp',
    render: (value: string) => {
      return h('span', { style: { color: value === '无危害' ? 'gray' : 'red' } }, value);
    },
  },
  { label: '样品特性补充', fieldName: 'propAddContent', span: { md: 2, sm: 1, xs: 1 } },
  { label: '检测项目', fieldName: 'testItems', span: { md: 3, sm: 1, xs: 1 } },
  { label: '测试周期', fieldName: 'testCycle', span: { md: 3, sm: 1, xs: 1 } },
  {
    label: '样品处理方式',
    fieldName: 'sampleHandling',
    render: (value: number) => {
      return h(
        'span',
        { style: { color: value === 1 ? 'green' : 'red' } },
        value === 1 ? '样品退回' : '检测单位自行处理'
      );
    },
  },
  {
    label: '服务类型',
    fieldName: 'serviceType',
    render: (value: number) => {
      return h('span', { style: { color: value === 1 ? 'red' : 'gray' } }, value === 1 ? '加急' : '普通');
    },
  },
  {
    label: '检测分包',
    fieldName: 'subcontractTest',
    render: (value: number) => {
      return h('span', { style: { color: value === 1 ? 'red' : 'gray' } }, value === 1 ? '是' : '否');
    },
  },
  { label: '特殊要求', fieldName: 'specialReq', span: { md: 3, sm: 1, xs: 1 } },
  {
    label: '报告结果',
    fieldName: 'reportResult',
    render: (value: number) => {
      return h('span', { style: { color: value === 1 ? 'red' : 'green' } }, value === 1 ? '需判定' : '仅提供数据');
    },
  },
  { label: '判定规则', fieldName: 'judgmentRule', span: { md: 2, sm: 1, xs: 1 } },
  {
    label: '报告发送',
    fieldName: 'reportSending',
    render: (value: string) => {
      const statusMap = {
        Byself: 'green',
        Bymail: 'blue',
        Byexpress: 'orange',
      };
      const res = {
        Byself: '自取',
        Bymail: '电子邮件',
        Byexpress: '快递',
      };
      return h('span', { style: { color: statusMap[value] || 'gray' } }, res[value] || value);
    },
  },
  { label: '快递地址', fieldName: 'reportAddContent', span: { md: 2, sm: 1, xs: 1 } },
  {
    label: '发票种类',
    fieldName: 'invoiceType',
    render: (value: string) => {
      const statusMap = {
        Noneed: 'gray',
        OrdinaryVAT: 'blue',
        SpecialVAT: 'orange',
      };
      const res = {
        Noneed: '无需发票',
        OrdinaryVAT: '增值税普通发票',
        SpecialVAT: '增值税专用发票',
      };
      return h('span', { style: { color: statusMap[value] || 'gray' } }, res[value] || value);
    },
  },
  {
    label: '发票抬头',
    fieldName: 'invoiceTitle',
    render: (value: number) => {
      const statusMap = {
        0: 'blue',
        1: 'gray',
        2: 'gray',
        3: 'red',
      };
      const res = {
        0: '不同',
        1: '同委托单位',
        2: '/',
        3: 'undefined',
      };
      return h('span', { style: { color: statusMap[value] || 'gray' } }, res[value] || value);
    },
  },
  {
    label: '发票寄送',
    fieldName: 'invoiceMailing',
    render: (value: number) => {
      const statusMap = {
        0: 'blue',
        1: 'gray',
        2: 'gray',
        3: 'red',
      };
      const res = {
        0: '不同',
        1: '同委托单位',
        2: '/',
        3: 'undefined',
      };
      return h('span', { style: { color: statusMap[value] || 'gray' } }, res[value] || value);
    },
  },
  { label: '发票抬头内容', fieldName: 'invoiceTitleCont', span: { md: 3, sm: 1, xs: 1 } },
  { label: '发票邮寄地址', fieldName: 'invoiceMailAddr', span: { md: 3, sm: 1, xs: 1 } },
  { label: '备注', fieldName: 'remarks', span: { md: 3, sm: 1, xs: 1 } },
]);
